<template>
  <div class="ecahrt-line-one">
    <vue-chart :options="chartOptions" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import VueChart from "@/components/VueChart.vue";
import { getInvestmentData } from "@/api/investment";

// 初始化图表配置
const chartOptions = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  color: ["#18F2F9", "#FF8A00"],
  grid: {
    left: "2%",
    right: "2%",
    bottom: "4%",
    top: "10%",
    containLabel: true,
  },
  legend: {
    data: ["计划完成投资", "实际完成投资"],
    textStyle: {
      color: "#fff",
      fontSize: 16,
    },
    top: 6,
    right: 10,
    itemWidth: 12,
    itemHeight: 5,
    icon: "rect",
    padding: [0, 5],
  },
  xAxis: {
    type: "category",
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
    axisLabel: {
      color: "#fff",
      fontSize: 16,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "rgba(73, 122, 201, .6)",
      },
    },
    axisLabel: {
      color: "#fff",
      fontSize: 16,
    },
    nameTextStyle: {
      color: "rgba(132, 195, 255, 1)",
    },
  },
  series: [
    {
      name: "计划完成投资",
      type: "line",
      showAllSymbol: true,
      symbol: "circle",
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 1,
        color: function (params) {
          return params.dataIndex < 6 ? "#18F2F9" : "#FF0000";
        },
      },
      lineStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0.45,
              color: "#18F2F9",
            },
            {
              offset: 0.46,
              color: "#FF0000",
            },
            {
              offset: 1,
              color: "#FF0000",
            },
          ],
        },
        width: 2,
      },
      symbolSize: 6,
      label: {
        show: true,
        position: "bottom",
        textStyle: {
          color: "#fff",
        },
      },
      data: [],
    },
    {
      name: "实际完成投资",
      type: "line",
      showAllSymbol: true,
      symbol: "circle",
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 1,
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#fff",
        },
      },
      symbolSize: 6,
      data: [],
      color: "#FF8A00",
    },
  ],
});

// 获取数据并更新图表
const fetchData = async () => {
  try {
    const response = await getInvestmentData();
    if (response.code === 200) {
      chartOptions.value.series[0].data = response.data.planned;
      chartOptions.value.series[1].data = response.data.actual;
    }
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
.ecahrt-line-one {
  height: 100%;
  width: 100%;
}
</style>
